<template>
  <div class="progress-right">
    <div v-for="(item,index) in statusCountList" :key="index" class="box-progress">
      <div class="progress-title">
        <span :style="{'border':'2px solid','borderColor':setColor(item.status)}" class="block"/>
        <span>{{ item.status|titleFilter }}</span>
      </div>
      <!-- 传statusCountList字段保证echart更新 total和item-num无法保证切换时从不相同-->
      <pieEcharts
        :total="total"
        :item-num="item.qty"
        :status-name="item.status"
        :color="item.status|echartsColor"
        :status-count-list="statusCountList"/>
    </div>
  </div>
</template>
<script>
import pieEcharts from './pieEcharts'
export default {
  name: 'ProgressList',
  components: { pieEcharts },
  filters: {
    titleFilter(val) {
      const titleItem = {
        'RUN': '生产/Run',
        'ALARM': '报警/Alarm',
        'IDLE': '空闲/Idle',
        'NETWORKFAILURE': '断网/Network Failure',
        'STOP': '停机/Stop'
      }
      return titleItem[val]
    },
    echartsColor(val) {
      const colors = {
        'RUN': '#1AD175',
        'ALARM': '#EC4014',
        'IDLE': '#3F8EDD',
        'NETWORKFAILURE': '#959595',
        'STOP': '#FFDD20'
      }
      return colors[val]
    }
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    statusCountList: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {}
  },
  methods: {
    setColor(val) {
      const colors = {
        'RUN': '#1AD175',
        'ALARM': '#EC4014',
        'IDLE': '#3F8EDD',
        'NETWORKFAILURE': '#959595',
        'STOP': '#FFDD20'
      }
      return colors[val]
    }
  }
}
</script>
<style lang='scss' scoped>
.progress-right{
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
  .box-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    .progress-title {
      width: 100%;
      display: flex;
      align-items: center;
      .block {
        width: 14px;
        height: 14px;
        margin-right: 4px;
        background-color: #f4f4f4;
      }
    }
  }
</style>
